<template>
  <div class="my-balance">
    <div>
      <span class="my-balance-label">{{ $t('可用') }}：</span>
      <span v-if="balance">{{ balance.available | numberFormat(8) }} {{ balance.unit }}</span>
    </div>
    <div>
      <nuxt-link class="btn-recharge" :to="`/fund/recharge?coin=${coinName}`">{{ $t('充值') }}</nuxt-link>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    coinName: {
      type: String,
      required: true
    }
  },
  computed: {
    ...mapGetters({
      getCoinBalance: 'fund/getCoinBalance'
    }),
    balance () {
      return this.getCoinBalance(this.coinName)
    }
  }
}
</script>
<style scoped>
.my-balance {
  background-color: #f0f3fa;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
}
.my-balance-label {
  color: #999;
}
.btn-recharge {
  padding: 2px 6px;
  background-color: #ddd;
}
</style>
